<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>View generation -- Model-bound generation example</title>
	
		<script src="../../../../dojo/dojo.js"
				type="text/javascript"
				djConfig="isDebug: true, parseOnLoad: true">
		</script>
		<style type="text/css">
			@import "css/app-format.css";
			@import "../../../../dijit/themes/claro/claro.css";			
		</style>
		<script type="text/javascript" >
			dojo.require("dojox.mvc");
			dojo.require("dojox.mvc.Generate");
			dojo.require("dijit.form.Textarea");
			dojo.require("dojo.parser");
	
			function updateView() {
				var modeldata = dojo.fromJson(dijit.byId("modelArea").value);
				var model = dojox.mvc.newStatefulModel({ data : modeldata });
				dijit.byId("view").set("ref", model);
			};
		dojo.addOnLoad(updateView);
	   </script>
	</head>
	<body class="claro">
		<div id="wrapper">
			<div id="header">
				<div id="navigation"></div>
				<div id="headerInsert">
				<h1>View generation example</h1>
				<h2>Data Binding - Generate Container.</h2>
			</div>
		</div>
		<div id="main">
			<div id="leftNav"></div>
			<div id="mainContent">
				<h3>Model</h3>
				<div class="row">
					<textarea class="cell" data-dojo-type="dijit.form.Textarea" id="modelArea" data-dojo-props="onBlur: updateView">
{
    "Serial" : "360324",
    "First"  : "John",
    "Last"   : "Doe",
    "Email"  : "jdoe@example.com",
    "Address": {
        "Street" : "123 Valley Rd",
        "City"   : "Katonah",
        "State"	 : "NY",
        "Zip"    : "10536"
    },
    "Phones" : [{
        "Areacode" : "111",
        "Local"	   : "111-1111"
    },{
        "Areacode" : "222",
        "Local"	   : "222-2222"
    }],
    "Member" : {
        "Since"	 : "2010",
        "Type"   : "Gold"
    }
}
					</textarea>
					</div>
					<h3>Generated View</h3>
					<div id="view" data-dojo-type="dojox.mvc.Generate" data-dojo-props="idNameMapping:{'String' : 'view_t'}"></div>
				</div>
			</div>
		</div>
	</body>
</html>
